<template>
    <div>
        <div class="myEcharts" ref="myEcharts">
        </div>
    </div>
</template>


<script>
/* 
    项目中使用echarts
    1. 先下载
        npm install echarts --save

    2. 在引入
       import * as echarts from 'echarts';  // 整体载入

    3. 创建容器-> 定宽高

    4. 初始化echart实例
 
*/

import * as echarts from 'echarts';   // !!

export default {
    name: "EchartsView",
    data() {
        return {
            myEcharts: null,
            option: {},
        }
    },
    methods: {
        getData() {
            setTimeout(() => {
                this.option = {
                    // 标题组件
                    title: {
                        show: false,
                        text: 'hello world',
                        link: "https://www.baidu.com",
                        subtext: "echarts",
                        sublink: "https://www.jd.com",
                    },

                    // 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
                    toolbox: {
                        show: true,
                        feature: {
                            // dataZoom: {
                            //     yAxisIndex: "none"
                            // },
                            // dataView: {
                            //     readOnly: false
                            // },
                            magicType: {
                                type: ["line", "bar"]
                            },
                            restore: {},
                            // saveAsImage: {}
                        }
                    },

                    // 提示框组件。
                    tooltip: {
                        show: false,
                    },

                    // 图例组件。  => 图例组件展现了不同系列的标记(symbol)，颜色和名字。
                    legend: {
                        data: ['销量', '库存', '满意度']
                    },
                    // 直角坐标系 grid 中的 x 轴
                    xAxis: {
                        type: "category",   // (类目轴)
                        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                    },
                    yAxis: {
                        type: "value",  // (数值轴)
                    },
                    // 系列
                    series: [{
                        name: '销量',
                        type: 'bar',  // line
                        data: [5, 20, 36, 10, 10, 20]
                    }, {
                        name: '库存',
                        type: 'bar', // line
                        data: [25, 15, 24, 44, 3, 1]
                    }, {
                        name: '满意度',
                        type: 'bar', // line
                        data: [80, 99, 91, 72, 90, 100]
                    }],

                    // 饼状图
                    // series: [{
                    //     name: '销量',
                    //     type: 'pie',  // line
                    //     roseType:"南丁格尔图",
                    //     data: [
                    //         {name:"衬衫",value:5}, 
                    //         {name:"羊毛衫",value:20},
                    //         {name:"雪纺衫",value:6}, 
                    //         {name:"裤子",value:10}, 
                    //         {name:"高跟鞋",value:15}, 
                    //         {name:"袜子",value:10}]
                    // }]
                }
                this.initEcharts();
            }, 1000)
        },
        initEcharts() {
            // 基于准备好的dom，初始化echarts实例  
            this.myEcharts = echarts.init(this.$refs.myEcharts);

            /* let option = {
                // 标题组件
                title: {
                    show: false,
                    text: 'hello world',
                    link: "https://www.baidu.com",
                    subtext: "echarts",
                    sublink: "https://www.jd.com",
                },

                // 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
                toolbox: {
                    show: true,
                    feature: {
                        // dataZoom: {
                        //     yAxisIndex: "none"
                        // },
                        // dataView: {
                        //     readOnly: false
                        // },
                        magicType: {
                            type: ["line", "bar"]
                        },
                        restore: {},
                        // saveAsImage: {}
                    }
                },

                // 提示框组件。
                tooltip: {
                    show: false,
                },

                // 图例组件。  => 图例组件展现了不同系列的标记(symbol)，颜色和名字。
                legend: {
                    data: ['销量', '库存', '满意度']
                },
                // 直角坐标系 grid 中的 x 轴
                xAxis: {
                    type:"category",   // (类目轴)
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                },
                yAxis: {
                    type:"value",  // (数值轴)
                },
                // 系列
                series: [{
                    name: '销量',
                    type: 'bar',  // line
                    data: [5, 20, 36, 10, 10, 20]
                }, {
                    name: '库存',
                    type: 'bar', // line
                    data: [25, 15, 24, 44, 3, 1]
                }, {
                    name: '满意度',
                    type: 'bar', // line
                    data: [80, 99, 91, 72, 90, 100]
                }],

                // 饼状图
                // series: [{
                //     name: '销量',
                //     type: 'pie',  // line
                //     roseType:"南丁格尔图",
                //     data: [
                //         {name:"衬衫",value:5}, 
                //         {name:"羊毛衫",value:20},
                //         {name:"雪纺衫",value:6}, 
                //         {name:"裤子",value:10}, 
                //         {name:"高跟鞋",value:15}, 
                //         {name:"袜子",value:10}]
                // }]
            } */
            this.myEcharts.setOption(this.option);
        }
    },
    mounted() {
        // this.initEcharts();
        this.getData(); 
    }
}
</script>

<style lang="scss" scoped>
.myEcharts {
    width: 800px;
    height: 400px;
    border: 1px dashed #333;
}
</style>